<template>
  <div class="smart-home">

    <!-- 面包屑 -->
    <el-card class="box-card box-card-bgcolor">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/main/home' }">当前位置：首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统运行信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- 待处理事项： -->
    <el-card class="box-card box-card-bgcolor">
      <div slot="header" class="clearfix">
        <i class="el-icon-edit-outline icon-home"></i>
        <span class="home-title-text blue">系统信息统计</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <span>系统信息统计</span>
            </div>
            <!-- <div class="text item chart-content" id="pie-chart">
            </div> -->
            <div class="text item">

            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
            </div>
            <div class="text item">
              <p>当前配置：1564865516465</p>
            </div>
            <div class="text item">
              <p>开启服务器时间：2016.08.06</p>
            </div>
            <div class="text item">
              <p>CPU内存（占用/剩余）：566562565</p>
            </div>
            <div class="text item">
              <p>当前IP接口：127.0.15.23</p>
            </div>
            <div class="text item">
              <p>当前通信口：120.0.15.11</p>
            </div>
          </el-card>
        </el-col>

      </el-row>
    </el-card>

  </div>
</template>

<script>
export default {
  data(){
    return{
      icon1:"&#xe653;",
      icon2:"&#xe6b6;",
      icon3:"&#xe619;"
    }
  },
  //  mounted(){
  //   var echarts = require('echarts');
  //   // 饼状图
  //   var myChart = echarts.init(document.getElementById('pie-chart'));
  //   myChart.setOption({
  //       // title: {
  //       //     text: '嵌套环形图'
  //       // },
  //       tooltip : {
  //       trigger: 'item',
  //       formatter: "{a} <br/>{b} : {c} ({d}%)"
  //   },
  //   legend: {
  //       orient: 'vertical',
  //       left: 'left',
  //       data: ['当前在线人数','得到报文数','发送报文数','视频广告','搜索引擎']
  //   },
  //   series : [
  //       {
  //           name: '访问来源',
  //           type: 'pie',
  //           radius : '55%',
  //           center: ['50%', '60%'],
  //           data:[
  //               {value:335, name:'直接访问'},
  //               {value:310, name:'邮件营销'},
  //               {value:234, name:'联盟广告'},
  //               {value:135, name:'视频广告'},
  //               {value:1548, name:'搜索引擎'}
  //           ],
  //           itemStyle: {
  //               emphasis: {
  //                   shadowBlur: 10,
  //                   shadowOffsetX: 0,
  //                   shadowColor: 'rgba(0, 0, 0, 0.5)'
  //               }
  //           }
  //       }
  //   ]
  //   });


  // }

}
</script>

<style scoped lang="scss">
  @import '@/assets/css/systemruninfo.scss'
</style>
